﻿<!DOCTYPE html >
<html>
<head>
    <title></title>
    <script src="/Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="/Scripts/JXSockets-1.0.4.beta.js" type="text/javascript"></script>
    
    <script type="text/javascript">


        $(function () {

            // add the dataTransfer property for use with the native `drop` event
            // to capture information about files dropped into the browser window
            jQuery.event.props.push("dataTransfer");

            // Create a regular WebSocket "instance", using the Generic WebSocketHandler
            var binaryWs = new jXSockets.xWebSocket("ws://127.0.0.1:4502/GenericBinary");

            binaryWs.bind("blob", function (blob) {
                console.log(blob);
                window.URL = window.URL || window.webkitURL;
                var img = document.createElement("img");
                img.height = 60;
                img.src = window.URL.createObjectURL(blob);
                img.onload = function (e) {
                    window.URL.revokeObjectURL(this.src);
                }
                $("#images").append($(img));
            });





            binaryWs.bind("send", function (msg) {
                console.log("Sending..");
                console.log(msg);
            });
            $("#dropbox").bind("drop dragenter dragexit dragover", function (e) {
                e.stopPropagation();
                e.preventDefault();
            });
            $("#dropbox").bind("drop", function (e) {
                $(this).hide();
                e.stopPropagation();
                e.preventDefault();
                var files = e.dataTransfer.files;
                $(files).each(function () {
                    binaryWs.send(this);
                });
                $(this).show();
            });
        });



    </script>
</head>
<style type="text/css">
    #dropbox
    {
        width: 200px;
        height: 200px;
        border: 2px solid #DDD;
        border-radius: 8px;
        background-color: #FEFFEC;
        text-align: center;
    }
    
    #images img
    {
        float: left;
        margin-right: 10px;
    }
</style>
<body>
    <h2>
        Drop an image here</h2>
    <div id="dropbox">
    </div>
    <div id="images">
    </div>
</body>
</html>
